<div ng-controller="InteractiveWidgetPreview" class="oppia-iframe-container">
  <span class="pull-right">
    <span ng-hide="isEmpty(interactiveWidget.params)">
      <a href="#" data-toggle="modal" data-target="#customizeWidgetModal">
        Customize
      </a> |
    </span>
    <a href="#" data-toggle="modal" data-target="#interactiveWidgetModal">
      Choose a different interaction
    </a>
  </span>

  <h4>
    Interactivity Preview
    <img class="oppia-help" src="/images/help.png"
         ui-jq="tooltip"
         title="This allows the reader to answer questions and learn by doing. The reader's input can then be evaluated using the rules below.">
  </h4>
  <iframe id="interactiveWidgetPreview" frameborder="1" width="100%" height="300px">
  </iframe>

  <hr>

  <h4>
    Answer classification rules
    <img class="oppia-help" src="/images/help.png"
         ui-jq="tooltip"
         title="The reader's answer is evaluated against each of these rules. If one matches, the reader is sent to the corresponding destination state, and the corresponding piece of feedback will be shown.">
  </h4>
  <div ng-repeat="(action, properties) in interactiveWidget.actions">
    <h5>On user <[action]>:</h5>
    <table>
      <tr ng-repeat="rule in interactiveRulesets[action]">
        <td style="width: 80%">
          <[rule | parameterizeRule: interactiveParams.choices]>:
          (<[getStateName(rule.dest)]><span ng-show="rule.feedback">, <[rule.feedback|truncate]></span>)
        </td>
        <td style="width: 20%">
          <a href="#" data-toggle="modal" data-target="#addRuleModal" ng-click="openEditRuleModal(action, $index)">
            Edit
          </a>

          <span ng-show="$index != 0 && $index != interactiveRulesets[action].length - 1">
            | <a ng-click="swapRules(action, $index, $index - 1)"> ⇑ </a>
          </span>
          <span ng-hide="$index != 0 && $index != interactiveRulesets[action].length - 1">
            | <span class="oppia-grayed"> ⇑ </span>
          </span>

          <span ng-show="$index < interactiveRulesets[action].length - 2">
            | <a ng-click="swapRules(action, $index, $index + 1)"> ⇓ </a>
          </span>
          <span ng-hide="$index < interactiveRulesets[action].length - 2">
            | <span class="oppia-grayed"> ⇓ </span>
          </span>

          <span ng-show="$index != interactiveRulesets[action].length - 1">
            | <a ng-click="deleteRule(action, $index)"> &times; </a>
          </span>
          <span ng-hide="$index != interactiveRulesets[action].length - 1">
            | <span class="oppia-grayed"> &times; </span>
          </span>
        </td>
      </tr>
    </table>
    <button ng-show="properties.rules"
            type="button" class="btn btn-primary" data-toggle="modal"
            data-target="#addRuleModal" ng-click="openAddRuleModal(action)">
      Add rule
    </button>
  </div>

  <div class="modal hide fade" id="customizeWidgetModal">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &times;
      </button>
      <h3 id="customizeWidgetModalLabel">Customize This Widget</h3>
    </div>
    <div class="modal-body">
      <div ng-repeat="(key, val) in interactiveParams">
        <span ng-show="isArray(val)">
          <[key]>: <list items="val"></list>
        </span>
        <span ng-hide="isArray(val)">
          <[key]>: <string item="interactiveParams[key]">
        </span>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal" ng-click="saveWidgetParams()">Save</button>
    </div>
  </div>

  <div class="modal hide fade" id="interactiveWidgetModal" style="width: 900px; margin-left: -390px;">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        &times;
      </button>
      <h3 id="interactiveWidgetModalLabel">
        Choose an Interactive Widget
      </h3>
    </div>
    <div class="modal-body">
      <iframe src="/widgetrepository?iframed=true&interactive=true"
              width="100%" height="400px" frameborder="0"
              id="interactiveWidgetRepository">
      </iframe>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal">
        Cancel
      </button>
    </div>
  </div>

  <div class="modal hide fade" id="addRuleModal" ng-model="addRuleModalShown">
    <div class="modal-header">
      <span ng-show="addRuleActionIndex">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
      </span>
      <h3><[addRuleModalTitle]></h3>
    </div>

    <div class="modal-body">
      <h4><[addRuleAction.type]></h4>

      <div ng-hide="addRuleActionRule">
        <div ng-repeat="(rule, attrs) in interactiveWidget.actions[addRuleAction].rules"
             class="oppia-rule">
          <span ng-bind-html="rule | bracesToText"></span>
          <button type="button" class="pull-right"
                  ng-click="selectRule(rule, attrs)">
            Select
          </button>
        </div>
      </div>

      <div ng-show="addRuleActionRule">
        <span angular-html-bind="addRuleActionRule | bracesToInput: interactiveParams.choices"></span>

        <hr>
        <div>
          Destination:
          <select ng-model="addRuleActionDest"
                  ng-required="addRuleActionDest != '?'"
                  ng-options="getDestName(id) for id in getAllDests()">
          </select>
  
          <input ng-model="addRuleActionDestNew"
                 ng-show="addRuleActionDest == '?'" type="text" ng-required="addRuleActionDest == '?'">
        </div>
        <div>
          <p>Feedback for the reader (chosen at random from the following):</p>
          <list large-input="true" items="addRuleActionFeedback">
        </div>
        <!-- TODO(yanamal): Add a section for parameter changes here. -->
      </div>
    </div>
  
    <div class="modal-footer">
      <span ng-show="addRuleActionRule">
        <button type="button"
                ng-click="saveRule(addRuleActionRule, addRuleActionAttrs,
                          addRuleActionInputs, addRuleActionDest, addRuleActionDestNew, addRuleActionFeedback)">
          Save
        </button>
      </span>

      <!-- The 'addRuleActionIndex == null' clause is to ensure that the 'Cancel' action
      returns to the 'previous' screen only when a new rule is being added. Otherwise, the modal
      should just be dismissed. -->
      <span ng-show="addRuleActionRule && addRuleActionIndex == null">
        <button type="button" class="btn" ng-click="deselectAllRules()">
          Cancel
        </button>
      </span>
  
      <span ng-show="!addRuleActionRule && addRuleActionIndex == null">
        <button type="button" class="btn" data-dismiss="modal">
          Cancel
        </button>
      </span>
    </div>
  </div>

</div>


